AI科技不斷進步，有可能用免費AI服務一次完成:A4表格表單切版挑戰嗎?
讀者可以猜猜看封面圖3個是誰切出來的~
實驗日期: 2024/09/06
費用: 0元 (全部都故意找可以上傳圖片，免費的服務)
提示詞使用次數: 只能1次
實驗對象:
以下是提示詞
`仔細分析圖片幫我將圖片轉成html,css 要跟圖片一樣
這是很重要的切版工作`
並同時上傳一張圖片
第一名: Claude3.5 Sonnet 切出來的樣子
第二名: Microsoft Copilot 切出來的樣子
第三名: Google Gemini 切出來的樣子
趁這個機會推廣一下 Claude3.5
我認為最大的優勢是在撰寫程式碼方面非常優秀，可以即時預覽成果並公開發布
雖然離想要的樣子有一段落差，但效果已經很明顯了
小結:
現階段還很難靠AI切版，畢竟很不穩定
前端工程師們~自己來還是比較快 (再過幾年後就不知道了~
期待解放雙手的那天到來
https://github.com/cognitom/paper-css
搭配這個樣板將Claude3.5的版本加工一下
做出一個 可以點按鈕列印的 A4-表格-表單
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8" />
<title>臺北市住宅汰換節能家電補助申請書</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css"
/>
<style>
/* print start */
@page {
size: A4;
}
@media print {
button {
display: none;
}
}
/* print end */
body {
font-family: Arial, sans-serif;
line-height: 1.4;
font-size: 12px;
}
.sheet {
padding: 10mm;
}
h1 {
text-align: center;
font-size: 16px;
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
}
th,
td {
border: 1px solid #000;
padding: 4px;
text-align: left;
vertical-align: top;
}
.appliance-table th,
.appliance-table td {
font-size: 10px;
}
.declaration-table td:first-child {
width: 20px;
}
</style>
</head>
<body class="A4">
<section class="sheet">
<h1>附件 1、臺北市住宅汰換節能家電補助申請書</h1>
<p>(以下表格及欄位由申請人填寫) 申請序號：____________</p>
<table>
<tr>
<th colspan="2">A.申請人基本資料</th>
</tr>
<tr>
<td>姓名：</td>
<td>身份證字號：</td>
</tr>
<tr>
<td>聯絡電話：</td>
<td>行動電話：</td>
</tr>
<tr>
<td colspan="2">E-mail：</td>
</tr>
<tr>
<td colspan="2">通訊地址：</td>
</tr>
<tr>
<td colspan="2">設備安裝使用地址：□同通訊地址</td>
</tr>
</table>
<table>
<tr>
<th>B.檢附文件</th>
<th>是否備齊</th>
</tr>
<tr>
<td>1. 臺北市住宅汰換節能家電補助申請書</td>
<td>□是□否</td>
</tr>
<tr>
<td>
2. 國民身分證或中華民國居留證正反面影本(可自行註明「限 111
年度住宅家電補助使用」或由本局代為註記)
</td>
<td>□是□否</td>
</tr>
<tr>
<td>
3. 補助設備安裝地址證明文件(最近半年內具中 1
期臺電公司表燈用戶電費單影本、含電號)
</td>
<td>□是□否</td>
</tr>
<tr>
<td>
4. 載明產品型號之購買證明文件(統一發票收執聯或收據等)影本
(購買證明文件未載明產品型號時，應加附產品保證書或出貨單等相關單據)
</td>
<td>□是□否</td>
</tr>
<tr>
<td>5. 廢四機回收聯單第三聯(正本) 備註:請向販售業者索取</td>
<td>□是□否</td>
</tr>
<tr>
<td>6. 補助款領據、申請人金融機構存摺封面影本(戶名應與申請人一致)</td>
<td>□是□否</td>
</tr>
</table>
<table class="declaration-table">
<tr>
<th colspan="2">D. 切結事項</th>
</tr>
<tr>
<td>1.</td>
<td>申請人確實居住於本市申請安裝地址。</td>
</tr>
<tr>
<td>2.</td>
<td>
依本計畫規定獲得補助後，如事後查得申請人有違反本計畫規定事項或有隱匿、虛偽、偽造變造不實之情事，願負相關法律責任並依本計畫規定，繳回全部補助款，絕無異議。
</td>
</tr>
<tr>
<td>3.</td>
<td>
若屬公職人員利益衝突迴避法所定服務或監督本局之應迴避人員，已主動於申請文件內據實表明身分關係(本局網站利益衝突迴避專區，網址：https://www.dep.gov.taipei/cp.aspx?n=AD59A015184CAF9F
)
</td>
</tr>
<tr>
<td>4.</td>
<td>已詳細閱讀並願遵守上述內容。</td>
</tr>
</table>
<p>日期: 111 年 ____ 月 ____ 日</p>
</section>
</body>
<script>
const printBtnStyle = `position:fixed; top:0; right:0; background-color:black; color:white; padding:5px; border-radius: 5px; max-width:30px;`;
const printFn = () => {
const btn = document.getElementById("windowPrint");
btn.onclick = () => {
window.print();
};
};
genBtn({
btnText: "P",
style: printBtnStyle,
id: "windowPrint",
fn: printFn,
});
function genBtn({ btnText, style, id, fn }) {
const btnHtml = `<button style="${style || ""}" id="${id || ""}">
${btnText || "P"}
</button>`;
document.body.insertAdjacentHTML("afterend", btnHtml);
setTimeout(() => {
if (fn) {
fn();
}
}, 200);
}
</script>
</html>
iThome鐵人賽
看影片追技術